import React, { Component } from 'react'

export default class Footer extends Component {
  headleClear = () => {
    this.props.handleClearAll()
  }

  render() {
    const { todos } = this.props
    // const arr = todos.filter(item => !item.done)
    const total = todos.reduce((pre, cur) => {
      if (!cur.done) {
        pre += 1
      }
      return pre
    }, 0)
    return (
      <footer className="footer">
        <span className="todo-count">
          <strong>{total}</strong> 项目未完成
        </span>

        <ul className="filters">
          <li>
            <a className="selected" href="#/">
              全部
            </a>
          </li>
          <li>
            <a href="#/active">未完成</a>
          </li>
          <li>
            <a href="#/completed">完成</a>
          </li>
        </ul>
        <button className="clear-completed" onClick={this.headleClear}>清除完成</button>
      </footer>
    )
  }
}
